<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>咖啡完美 - Coffee Perfect</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', 'SimHei', Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }

        /* 头部横幅区域 */
        header {
            position: relative;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            background: #fff;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .banner {
            width: 100%;
            height: 300px;
            background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .banner img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* 导航栏 */
        nav {
            background-color: #E3F2FD;
            padding: 15px 0;
            border-top: 2px solid #BBDEFB;
        }

        nav ul {
            list-style: none;
            display: flex;
            justify-content: center;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        nav li {
            padding: 0 20px;
            position: relative;
        }

        nav li:not(:last-child)::after {
            content: '|';
            position: absolute;
            right: 0;
            color: #90CAF9;
        }

        nav a {
            color: #1976D2;
            text-decoration: none;
            font-size: 16px;
            font-weight: 500;
            transition: color 0.3s;
        }

        nav a:hover {
            color: #0D47A1;
            text-decoration: underline;
        }

        /* 主容器 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background: #fff;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        /* 主要内容区域 - 使用Flex布局 */
        main {
            display: flex;
            gap: 20px;
            margin-top: 20px;
        }

        /* 左侧边栏 - 菜单表格 */
        aside {
            flex: 0 0 300px;
            background-color: #E3F2FD;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        aside h2 {
            color: #1976D2;
            font-size: 24px;
            margin-bottom: 20px;
            text-align: center;
            border-bottom: 2px solid #90CAF9;
            padding-bottom: 10px;
        }

        .menu-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            background: #fff;
            border-radius: 5px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .menu-table th {
            background-color: #BBDEFB;
            color: #1976D2;
            padding: 12px 8px;
            text-align: center;
            font-size: 14px;
            font-weight: 600;
        }

        .menu-table th:first-child {
            background-color: transparent;
            border: none;
        }

        .menu-table td {
            padding: 10px 8px;
            text-align: center;
            border-bottom: 1px solid #E3F2FD;
            font-size: 14px;
        }

        .menu-table td:first-child {
            text-align: left;
            font-weight: 500;
            color: #1976D2;
        }

        .menu-table tr:last-child td {
            border-bottom: none;
        }

        .menu-table tr:hover {
            background-color: #F5F5F5;
        }

        .price {
            color: #D32F2F;
            font-weight: 600;
        }

        /* 缩略图区域 */
        .thumbnails {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 20px;
        }

        .thumbnail {
            width: 100%;
            height: 80px;
            object-fit: cover;
            border: 3px solid #fff;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            transform: rotate(-2deg);
            transition: transform 0.3s;
        }

        .thumbnail:hover {
            transform: rotate(0deg) scale(1.05);
        }

        /* 右侧主内容区域 */
        .content {
            flex: 1;
            background-color: #fff;
        }

        .coffee-item {
            display: flex;
            gap: 20px;
            margin-bottom: 30px;
            padding: 20px;
            background: #FAFAFA;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            transition: box-shadow 0.3s;
        }

        .coffee-item:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        .coffee-item:nth-child(even) {
            flex-direction: row-reverse;
        }

        .coffee-image {
            flex: 0 0 200px;
            height: 200px;
        }

        .coffee-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border: 4px solid #fff;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
        }

        .coffee-text {
            flex: 1;
        }

        .coffee-text h3 {
            color: #1976D2;
            font-size: 28px;
            margin-bottom: 8px;
        }

        .coffee-text .english-name {
            color: #666;
            font-size: 16px;
            font-style: italic;
            margin-bottom: 15px;
        }

        .coffee-text p {
            color: #555;
            font-size: 15px;
            line-height: 1.8;
            text-align: justify;
        }

        /* 页脚 */
        footer {
            background-color: #E3F2FD;
            text-align: center;
            padding: 20px 0;
            margin-top: 20px;
            color: #1976D2;
            font-size: 14px;
            border-top: 2px solid #BBDEFB;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            main {
                flex-direction: column;
            }

            aside {
                flex: 1;
            }

            .coffee-item {
                flex-direction: column !important;
            }

            .coffee-image {
                flex: 1;
                height: 250px;
            }

            nav ul {
                flex-wrap: wrap;
            }

            nav li {
                padding: 5px 10px;
            }
        }
    </style>
</head>
<body>
    <!-- 头部横幅 -->
    <header>
        <div class="banner">
            <img src="images/banner.jpg" alt="咖啡横幅">
        </div>
        
        <!-- 导航栏 -->
        <nav>
            <ul>
                <li><a href="#menu">咖啡MENU</a></li>
                <li><a href="#cook">咖啡COOK</a></li>
                <li><a href="#story">咖啡STORY</a></li>
                <li><a href="#news">咖啡NEWS</a></li>
                <li><a href="#party">咖啡PARTY</a></li>
            </ul>
        </nav>
    </header>

    <!-- 主容器 -->
    <div class="container">
        <!-- 主要内容区域 -->
        <main>
            <!-- 左侧边栏 - 菜单表格 -->
            <aside>
                <h2>咖啡MENU</h2>
                <table class="menu-table">
                    <thead>
                        <tr>
                            <th></th>
                            <th>拿铁</th>
                            <th>卡布奇诺</th>
                            <th>摩卡</th>
                            <th>浓缩咖啡</th>
                        </tr>
                        <tr>
                            <th></th>
                            <th>Latte</th>
                            <th>Cappuccino</th>
                            <th>Mocha</th>
                            <th>Espresso</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><strong>大杯</strong></td>
                            <td class="price">¥35</td>
                            <td class="price">¥35</td>
                            <td class="price">¥35</td>
                            <td class="price">¥30</td>
                        </tr>
                        <tr>
                            <td><strong>中杯</strong></td>
                            <td class="price">¥30</td>
                            <td class="price">¥30</td>
                            <td class="price">¥30</td>
                            <td class="price">¥25</td>
                        </tr>
                        <tr>
                            <td><strong>小杯</strong></td>
                            <td class="price">¥25</td>
                            <td class="price">¥25</td>
                            <td class="price">¥25</td>
                            <td class="price">¥20</td>
                        </tr>
                    </tbody>
                </table>

                <!-- 缩略图 -->
                <div class="thumbnails">
                    <img src="images/Latte.jpg" alt="拿铁" class="thumbnail">
                    <img src="images/Cappuccino.jpg" alt="卡布奇诺" class="thumbnail">
                    <img src="images/Mocha.jpg" alt="摩卡" class="thumbnail">
                    <img src="images/Espresso.jpg" alt="浓缩咖啡" class="thumbnail">
                    <img src="images/1.bmp" alt="咖啡" class="thumbnail">
                </div>
            </aside>

            <!-- 右侧主内容 -->
            <section class="content">
                <!-- 拿铁 -->
                <article class="coffee-item">
                    <div class="coffee-image">
                        <img src="images/Latte.jpg" alt="拿铁">
                    </div>
                    <div class="coffee-text">
                        <h3>拿铁<span class="english-name">Caffè Latte</span></h3>
                        <p>拿铁是意式咖啡的经典传统饮品，由浓缩咖啡、热牛奶和少量奶泡完美融合而成。口感丝滑醇厚，奶香浓郁，咖啡的微苦与牛奶的甘甜相互平衡，带来层次丰富的味觉体验。您还可以根据个人喜好添加香草、焦糖或杏仁等风味糖浆，为您定制专属的拿铁风味。</p>
                    </div>
                </article>

                <!-- 卡布奇诺 -->
                <article class="coffee-item">
                    <div class="coffee-image">
                        <img src="images/Cappuccino.jpg" alt="卡布奇诺">
                    </div>
                    <div class="coffee-text">
                        <h3>卡布奇诺<span class="english-name">Cappuccino</span></h3>
                        <p>卡布奇诺采用传统工艺精心制作，由经验丰富的咖啡师将精心调制的热牛奶和细腻奶泡倾注于浓缩咖啡之上。奶泡丰富绵密，与咖啡完美融合，形成经典的层次分明的视觉效果。每一口都能感受到浓郁咖啡香与奶泡的轻盈质感，是咖啡爱好者的不二之选。</p>
                    </div>
                </article>

                <!-- 摩卡 -->
                <article class="coffee-item">
                    <div class="coffee-image">
                        <img src="images/Mocha.jpg" alt="摩卡">
                    </div>
                    <div class="coffee-text">
                        <h3>摩卡<span class="english-name">Caffè Mocha</span></h3>
                        <p>摩卡是咖啡与巧克力的完美邂逅，将香浓的摩卡酱、浓郁的浓缩咖啡和丝滑的蒸汽牛奶巧妙融合，最后点缀上轻盈的鲜奶油，再撒上一层可可粉。香甜的巧克力风味与咖啡的醇厚相得益彰，在寒冷的日子里或心情低落时，一杯温暖的摩卡总能带来满满的幸福感。</p>
                    </div>
                </article>

                <!-- 浓缩咖啡 -->
                <article class="coffee-item">
                    <div class="coffee-image">
                        <img src="images/Espresso.jpg" alt="浓缩咖啡">
                    </div>
                    <div class="coffee-text">
                        <h3>浓缩咖啡<span class="english-name">Espresso</span></h3>
                        <p>浓缩咖啡是咖啡的精髓所在，以最浓缩的形式呈现咖啡的纯粹魅力。采用优质咖啡豆，经过精心研磨和精确萃取，呈现出浓郁的咖啡香气和醇厚的口感。表面覆盖着一层金黄色的crema（咖啡脂），带来微妙的焦糖风味，醇厚而柔和，是真正咖啡爱好者的终极选择。</p>
                    </div>
                </article>
            </section>
        </main>

        <!-- 页脚 -->
        <footer>
            <p>网站设计课程版权 2015-2020</p>
        </footer>
    </div>
</body>
</html>

